1.什么事HTML、CSS?
是做网站的编程语言
浏览器把代码解析后的样子就是我们看到的网站

超文本标记语言Hypertext Markup Language，标准通用标记语言下的一个应用。HTML不是一种编程语言，而是一种标记语言，是网页制作所必备的。

层叠样式表Cascading Style Sheets是一种用来表现HTML或XML等文件样式的计算机语言。

如果去写代码？写到哪里？
一个网站是由多个网页组成的。

2.vscode编辑器

vs code下载地址：https://code.visualstudio.com/Download
如何安装插件、语言包？扩展----chinese 、open in brower 、view in brower

ctrl+y：前进
shift+end：从头选中一行
shift+home：从尾选中一行
shift+alt+↓：快速复制一行
shift+tab：向前缩进

tab：向后缩进
shift+tab：向前缩进

alt+鼠标左键：多光标
crtl+d：选中相同的元素下一个



3.深入了解网站开发
UI设计师：设计稿
web前端开发工程师（H5开发）
    设计稿-->代码
    数据库的数据->显示到页面
    HTML+CSS+javascript三大核心技术
        HTML->结构
        CSS->样式
        javascript->行为

web后端开发工程师


4.HTML基本结构和属性
    HTML:超文本 标记 语言

    超文本：文本内容+非文本内容（图片、视频、音频等）
    标记：<单词>，也叫作标签
    语言：编程语言

    写法分两种：
        单标签<header>
        双标签<header></header>

    创建标签的快捷键：单词 + tab -> <单词> 

    标签是可以上下排列，嵌套

    HTML5 元素标签含义大全(元素周期表):
    http://www.html5star.com/manual/html5label-meaning/

    标签的属性：来修饰标签的，设置当前标签的一些功能。
    <标签 属性="值" 属性2="值2">

5.HTML初始代码
每个.html文件都有的代码叫做初始代码，要符合html文件的规范写法
!+tab 可以快速的创建初始代码
<!DOCTYPE html>   文档声明：告诉浏览器这是一个html文件
<html lang="en">  html文件的最外层标签：包括着所有html标签代码   lang="en"表示是一个英文网站      lang="zh-CN"表示是一个中文网站
<head>
    <meta charset="UTF-8">  元信息：是编写网页中的一些辅助信息
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title> 设置网页的标题
</head>
<body>
    显示网页内容的区域
</body>
</html>


6.注释
    写法<!-- 注释内容 -->
    意义：
        1.把暂时不用的代码注释起来，方便以后使用
        2.对开发人员进行提示
    快捷添加注释
        ctrl+/
        shift+alt+a     


7.标题与段落
    标题->双标签<h1></h1>... <h6></h6>
    在一个网页中，h1标题最终，并且一个html中只能出现一个
    h5 h6,一般不经常使用
    
    段落->双标签<p></p>

8.文本修饰标签
    强调 -> 双标签：<strong></strong>  、 <em></em>
        区别：
            1.写法和展示效果有区别，一个加粗、一个斜体
            strong强调性更强，em稍弱

    下标：<sub></sub>
    上标：<sup></sup>

    删除文本：<del></del>
    插入文本：<ins></ins>

9.图片标签
    <img src="" alt="">单标签
    src 图片地址
    alt 图片不能显示时的显示文本，图片显示时，无效果
    title 鼠标移动到图片上时的提示信息
    width、height图片大小


10.文件的地址路径
    相对路径
        .在路径中表示当前路径
        ..在路径中表示上一级路径
    绝对路径
        G:/web前端/pic/renwu.jpg
        http://www.163.com/1.jpg

11.跳转链接
    <a href=""></a>双标签
        href属性:链接的地址
        target属性：可以改变链接打开的方式，默认打开当前页面_self，新窗口_blank

    base 在head中加入 <base target="_blank">

12.跳转锚点
    1.  #+id 
    <a href="#html">HTML</a>  
    .....
    <h2 id="html">HTML超文本标记语言</h2> 
    
    2.  #+name  (注意name属性是加给a标签的)
    <a href="#html">HTML</a>
    .....
    <a name="html"></a>

13.特殊符号
    空格符  &nbsp;
    版权    &copy;
    注册商标 &reg;
    大于>     &lt;
    小于<    &gt;
    和号&   &amp;
    人民币￥ &yen;
    摄氏度 &deg;

14.1.无序列表
    <ul type="">
        <li>第一项</li>
        <li>第二项</li>
        <li>第三项</li>
    </ul>
    type属性改变标记的样式，一般通过CSS样式来控制
        disc	默认值。实心圆。
        circle	空心圆。
        square	实心方块

    2.有序列表（用的比较少）
    <ol>
        <li></li>
        <li></li>
        <li></li>
    </ol>
    type属性改变标记的样式，一般通过CSS样式来控制

    3.定义列表dl dt dd 列表需要定义标题和对标题进行描述的列表
    <dl>
        <dt>HTML</dt>
        <dd>超文本标记语言</dd>
        <dt>CSS</dt>
        <dd>层叠样式表</dd>
    </dl>

    注：列表可以多层嵌套

15.表格标签
    <table></table>  
    <caption></caption>
    <tr></tr>
    <th></th>
    <td></td>

    语义化标签 <thead></thead>
    <tbody></tbody>
    <tfoot></tfoot>

    <tbody>可以出现多个

16.表格属性
    border:表格边框
    cellpadding:单元格内的空间
    cellspacing:单元格之间的空间
    colspan:合并列
    rowspan:合并行
    align:左右对齐方式 ：left、center、right
    valign:上下对齐方式：top、middle、bottom


17.表单标签
    <form action=""></form>表单最外层容器
    <input type="">单标签，最重要的
        type属性，决定是什么控件
            text,输入框,placeholder="请输入用户名"
            password,密码框
            checkbox,复选框，checked
            radio,单选框，同一name为一组，label，
            file,文件上传，multiple
            sumit,提交
            reset，重置

            textarea,
            select,(selected，multiple，disabled)


18.div 和span 
    div ：做一个区域划分的块
    span： 对文字进行修饰的内联

19.CSS样式
    格式：
        选择器{属性1: 值1;属性2: 值2;属性3: 值3}
    单位：
        px->像素（pixel）、%->百分比
    基本样式：
        width、height、background-color
    css注释：
     /* 注释内容 */


20.CSS样式的引入方式
    1.内联样式
        style属性
    2.内部样式
        style标签
        注：优点是可以复用样式
    符合w3c标准，尽量样式和结构分开处理
    3.外部样式
        引入一个单独的css文件，name.css
        通过link标签引入外部资源
        rel资源跟页面的关系。href引入地址
        <link rel="stylesheet" href="">

        @import 不常用。

21.css中的颜色表示法
    1.单词表示法：red blue green yellow
    2.十六进制表示法:#000000
    3.RGB三原色表示法:rgb(0,0,0)
        取值范围0~255

22.CSS背景样式
    background-color 背景色
    background-image 背景图
        url(背景地址)
        默认会水平垂直铺满背景图
    background-repeat 平铺方式
        repeat-x  x平铺
        repeat-y  y平铺
        repeat x,y都平铺
        no-repeat都不平铺
    background-position:背景位置
        x y:number(px,%)
        x:left center right
        y:top center bottom
    background-attachment
        scroll:默认值（背景位置是按照当前元素进行偏移）
        fixed：（背景位置是按照浏览器进行偏移）

23.CSS边框样式
    border-style:边框样式
        solid:实线
        dashed:虚线
        dotted:点线
    border-width:边框大小
        px
    border-color:边框颜色
    注：只设置一条边框线border-right-style
    transparent透明颜色

24.CSS文字样式
    font-family:字体类型
        英文字体:Aria 
        中文字体：微软雅黑
        注：用逗号设置多个。有空格的字体类型，加引号。
    font-size:默认16px。
        注：字体大小一般为偶数
    font-weight:字体粗细
        模式：正常(normal)、加粗(bold)
    font-style:字体样式
        模式：正常（normal），斜体（italic）
            italic 带有倾斜属性的字体才可以设置
            oblique 没有带有倾斜属性的字体也可以设置（一般很少用）
    color字体颜色

25.CSS段落样式
        text-decoratiion:文本修饰
            下划线underline
            删除线line-through
            上划线overline
        text-transform:
            小写 lowercase
            大写 uppercase
            首字母大写 capitalize

        text-indent:文本缩进
            首行缩进
            em单位：相对单位，1个em=一个字体单位
        text-align:文本对齐方式
            对齐方式：left center right justfy(两端点对齐)
        line-height:定义行高
            默认行高不是固定值，而是根据当前字体的大小在不断变化
        letter-spacing:字之间的间距
        word-spacing：词之间的间距（针对英文的）

        英文和数字很长不自动折行时：
        word-break:break-all;（强烈的折行）
        word-wrap:break-word;(不是那么强烈折行，会产生一些空白区域)

26.CSS复合样式：
    复合的写法，是通过空格的方式实现的。有些是关心顺序的，有些是不关心顺序的（font）。
    1.background:red url() no-repeat
    2.font:size和family，2个都要写，并且是有顺序的。
        weight style size family √
        style weight size family √
        style weight size/line-height family √
    注：如果非要混合去写，那么先要写混合样式，再写单一样式，这样才不会覆盖掉。

27.CSS选择器
    1.ID选择器
        #elem{}      id="elem" 
        ID是唯一的
    2.CLASS选择器
        .elem{}     class="elem"
        class是可以复用的
        可以添加多个class
    3.标签选择器
        div{} <div></div>
        使用的场景：
            1.去掉某些标签的默认样式
            2.复杂的选择器。如 层次选择器
    4.群组选择器
        div,#elem,span{}
    5.通配选择器
        *{} 所有标签
        注：尽量避免使用通配选择器
    6.层次选择器
        后代M  N{}   对子和子的子代都选择
        父子M > N{}  只对子有选择，子的子不管
        兄弟M ~ N{}  找到当前M下所有N都选择
        相邻M + N{}  当前M下相邻的N一个标签,如果不是N，则不选择。
    7.属性选择器
        M[attr]{}  所有M标签中带有attr属性的
            div[class]带有class
            div[class=box]完全匹配
            div[class*=box]部分匹配    class="box"  class="bigbox"
            div[class^=box]结束匹配    class="box"  class="bigbox"
            div[class=box][id=search] 多个属性组合匹配
    8.伪类选择器
        M:伪类{}
        :link 访问前的样式 （只能添加给a标签）
        :visited 访问后的样式（只能添加给a标签）
        :hover 鼠标移入时的样式（可以给所有的标签）
        :active 鼠标按下时的样式（可以给所有的标签）

        注：一般网站都只设置a 初始和 a:hover

        :after 在文本后添加内容
        :before 在文本前添加内容

        :checked :disabled :focus 都是针对表单元素的
    
    9.结构选择器
        li:nth-of-type(2){} 第二行
        li:nth-of-type(2n){} 偶数行
        li:nth-of-type(2n+1){}奇数行

        li:first-of-type 第一个
        li:last-of-type 最后一个
        li:only-of-type 仅有一个的时候效果

        nth-child子代关系

28.CSS继承
        文字相关的样式可以继承
        布局相关的样式不可以继承（inherit）

29.CSS优先级
    1.相同样式，后设置的优先级高
    2内部样式和外部样式同时出现样式，后引起的优先级高
    3.单一样式优先级：style行间>id>class>tag>*>继承
    4.!importtant,提升优先级（最高，不推荐，不能提升继承属性的优先级）
    5.标签+类>单类
    6.群组与单一选择器，优先级相同，靠后的高。
    7.层次优先级
        1.权重比较
            ul li .box p input{} 1+1+10+1+1
            .hello span #elem{}  10+1+100  
        2.约分比较
            ul li .box p input{}      li p input{}
            .hello span #elem{}       #elem{}

30. CSS盒子模型
    组成：content--padding----border--margin
     比如：快递物品--- 填充物-----包装盒--包装盒之间距离

    content：内容区域 width,height组成

    padding:内边距
        一个值：30px 上下左右
        二个值：30px 40px 上下和左右
        四个：  上 右 下 左
        padding-left

    margin:外边距
        一个值：30px 上下左右
        二个值：30px 40px 上下和左右
        四个：  上 右 下 左

        margin-left

    注：1.背景色填充到除了margin以内的所有区域
        2.margin可以是负数，重叠。padding不能是负数。

31.box-sizing:
    盒尺寸，可以改变盒子模型的展示形态
    默认值：width,height->content
    border-box:width,height->content,padding,border 

    使用场景：
        1.不用再去计算一些值
        2.解决一些100%的问题

32.盒子模型的上下叠加问题
    只会出现在上下。margin:30px  margin:30px  2个盒子的边距还是30px

33.盒子模型的传递问题
        margin传递问题只会出现在嵌套的结构中，只有margin-top会有出现问题，其他三个方向不会有传递问题。
34.扩展：
    1.margin左右自适应，上下没有
        margin:0 auto;
    2.width和height不设置的情况下对盒子的影响

35.标签分类
    按类型
     block:div p ul li h1 ...
        1.独占一行
        2.支持所有样式
        3.不写宽的时候，跟父元素的宽一样
        4.所占区域是一个矩形
     inline:span a em strong img ...
        1.挨在一起
        2.有些样式不支持 width，height，margin，padding
        3.宽度由内容决定
        4.所占的区域不一定是矩形
        5.内联标签之间会有空隙，原因是换行产生的
     inline-block: input select ... 
        1.挨在一起，支持宽高
     注：一般布局用block标签，修饰文本一般用inline标签
    
    按内容：
        Flow:流内容
        Metadata：元数据
        Sectioning:分区
        Heading:标题
        Phrasing：措辞
        Embedded:嵌入的
        Interactive：互动的
    
    按显示：
        替换元素：img
        非替换元素

36.显示框类型
    display:none:不占空间的 隐藏
    visibility:hidden占空间的隐藏

37.标签嵌套规范
    ul li
    dl dt dd
    table tr td 
    1.块能够嵌套内联
    2.块嵌套块
        特殊：错误写法
        <p>
            <div></div>
        </p>
    3.内联是不能嵌套块
        特殊：错误写法
        <span>
            <div></div>
        </span>
            正确写法:
            <a href="">
                <div></div>
            </a>

38.溢出隐藏
    overflow:
            visible:默认，溢出内容
            hidden 隐藏隐藏内容
            scroll 不管内容多少都会有滚动条
            auto 内容溢出时，自动出现滚动条
    overflow-x:
    overflow-y:

39.透明度与手势
    opacity:0(透明)-1（不透明）
            0.5半透明
            注：所以的子内容也会透明

    background: rgba(255,0,0,0.5);
            可以让指定的样式透明，不影响其他样式
    
    cursor:
        default:默认箭头
        要实现自定义手势：
            准备图片：.cur .ico

40.最大最小宽高
    min-width max-width
    min-height max-height

    %单位：换算---父容器的大小进行换算。

    一个容器怎么适应屏幕的高：容器加height：100%； body，html：100%

41.CSS默认样式。
    没有默认样式：
        div span...
    有默认样式：
        body--margin：8px;
        h1--margin:上下 21.44px
            font-weight:blod
        a 

42.CSS重置
    *{margin:0; padding:0;}
        不用考虑哪些标签有默认的margin padding
        
    *{margin:0; padding:0;}
    ul{list-style:none;}
    a{text-decoration:none;color:#999;}
    img{display:block;}
            问题的现象：图片跟容器底部有一些空隙
                内联元素的对齐方式是按照文字基线，不是最低线
                vertical-align:base-line;
                vertical-align:bottom;

    }


43.float浮动
    脱离文档流，延迟父容器靠左或靠右进行排列
        left right none
    float注意点
        只会影响后面的元素
        内容默认提升半层
        默认宽根据内容决定。
        换行排列
        主要给块元素添加，但也可以给内联元素添加